<template>
    <section>
        <div ref="echartsRef" class="echarts"></div>
    </section>
</template>
<script lang="ts" setup>
// 步骤1：引入echarts
import * as echarts from 'echarts'
import { onMounted, ref } from "vue";

type EChartsOption = echarts.EChartsOption;

const echartsRef = ref();

onMounted(() => {
    // 步骤2：获取需要渲染的dom节点（也可以使用：document.querySelector('.echarts')）
    // vue需要在onMounted中才能获取到dom节点
    const echartsDom = echartsRef.value;
    // 步骤3：初始化echarts实例
    var myEcharts = echarts.init(echartsDom);

    // 步骤4：定义图表选项和数据
    const option: EChartsOption = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                color: '#f00'
            }
        ]
    };

    // 认证实验：尝试改变data的数据，看看图标是否刷新
    setTimeout(() => {
            // 步骤6：修改数据需要设置data中的数据，然后再次调用setOption刷新数据
            option.series[0].data = option.series[0].data.map((item:number) => item + 10);
            myEcharts.setOption(option);
    },2000)

    // 步骤5：设置选项
    myEcharts.setOption(option);
})


</script>
<style lang="scss" scoped>
.echarts {
    width: 400px;
    height: 400px;
}
</style>